<template>
  <div class="header">
    <h2>依云商城后台管理</h2>
    <div>
      <!-- 用户信息 -->
      <span>欢迎您，{{ msg }}</span>

      <!-- 注销按钮 -->
      <el-button class="tanchu" type="text" @click="logout"
        ><el-button type="warning">注销登录</el-button></el-button
      >

      <!-- 设置按钮 -->
      <el-button
        type="info"
        icon="el-icon-setting"
        @click="toSeting"
      ></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderView",
  data() {
    return {
      msg: "",
    };
  },
  created() {
    //前期玩耍篇    后期修改
    // this.msg = localStorage.getItem("username");
    if (localStorage.getItem("username") == "admin") {
      this.msg = "wwteam";
    }
  },
  methods: {
    //退出登录
    logout() {
      this.$confirm("将注销此次登录，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "成功退出登录!",
          });
          localStorage.removeItem("token");
          localStorage.removeItem("username");
          this.$router.replace("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //跳转到设置页面
    toSeting() {
      this.$router.push("/settings");
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  color: #fff;

  h2 {
    font-size: 28px;
    font-weight: bold;
  }

  > div {
    display: flex;

    align-items: center;
    :deep(.el-button) {
      margin: 0 10px;
    }
  }
}
</style>